document.addEventListener('DOMContentLoaded', function () {
    // 获取动态生成的容器
    let progressSection = document.getElementById('progress-section');
    let metricsTable = document.getElementById('metrics-table');
    let summaryText = document.getElementById('summary-text');

    let ctx1 = document.getElementById('backtest-chart').getContext('2d');
    let ctx2 = document.getElementById('pos-chart').getContext('2d');
    let ctx3 = document.getElementById('holding-chart').getContext('2d');
    let ctx4 = document.getElementById('profit-chart').getContext('2d');
    let chartInstance;
    let chartInstance2;
    let chartInstance3;
    let chartInstance4;
    let completedText = document.getElementById("completed-text");
    let intervalId;

//    // 模拟的后端数据
//    const backendData = {
//        progress: {
//            "process1": 0.3,
//            "process2": 0.5,
//            "process3": 0.9
//        },
//        metrics: [
//            { name: "收益率", value: "15%", remark: "高于基准" },
//            { name: "最大回撤", value: "5%", remark: "可接受" },
//            { name: "夏普比率", value: "1.2", remark: "表现优秀" }
//        ],
//        summary: "本次回测结果表明策略具有良好的风险收益特性，适合长期投资。"
//    };

    // 动态生成进度条
    function renderProgressBars(progressData) {
        progressSection.innerHTML = ''; // 清空现有内容

        // 创建一个用于存放进度条的行容器
        let rowContent = '';
        let counter = 0;

        // 遍历进度数据
        Object.entries(progressData).forEach(([key, value], index) => {
            // 创建进度条的 HTML
            const progressBar = `
                <div class="mb-3 col-6">
                    <label>${key}</label>
                    <div class="progress">
                        <div id="${key}" class="progress-bar" role="progressbar" style="width: ${value * 100}%" aria-valuenow="${value * 100}" aria-valuemin="0" aria-valuemax="100">${(value * 100).toFixed(1)}%</div>
                    </div>
                </div>
            `;

            // 每两组进度条开始一个新的行
            if (counter % 2 === 0) {
                if (counter > 0) {
                    progressSection.innerHTML += `<div class="row">${rowContent}</div>`;
                }
                rowContent = progressBar;
            } else {
                rowContent += progressBar;
            }

            counter++;
        });

        // 处理最后剩下的进度条
        if (rowContent) {
            progressSection.innerHTML += `<div class="row">${rowContent}</div>`;
        }
    }

    // 折线图渲染逻辑
    function renderChart(drawData) {
        // 如果已经有一个图表实例，先销毁它
        if (chartInstance) {
            chartInstance.destroy();
            chartInstance2.destroy();
        }
        // 获取 common labels (共用的 X 轴，假设所有数据集都使用同一横坐标)
        const labels = drawData[0]?.labels || [];

        // 创建第一个图表的数据集（用于显示 '收盘价' 和 '净值'）
        const datasets1 = drawData.slice(0, 2).map(item => ({
            label: item.label,               // 数据集的标签
            data: item.data,                 // 对应的数据
            borderColor: item.borderColor || 'rgba(75, 192, 192, 1)', // 自定义边框颜色
            borderWidth: 2,
            fill: false,
            pointRadius: 1,  // 减小点的半径，避免显示太大的圆圈
            pointHoverRadius: 2, // 鼠标悬浮时点的半径
        }));

        // 创建第二个图表的数据集（用于显示 '仓位'）
        const datasets2 = drawData.slice(2).map(item => ({
            label: item.label,               // 数据集的标签
            data: item.data,                 // 对应的数据
            borderColor: item.borderColor || 'rgba(255, 99, 132, 1)', // 自定义边框颜色
            borderWidth: 2,
            fill: false,
            pointRadius: 1,  // 减小点的半径，避免显示太大的圆圈
            pointHoverRadius: 2, // 鼠标悬浮时点的半径
        }));

        // 渲染第一个图表（收盘价和净值）
        chartInstance = new Chart(ctx1, {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets1
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    x: {
                        display: false  // 隐藏第一个图表的 X 轴
                    }
                }
            }
        });
        // 渲染第二个图表（仓位）
        chartInstance2 = new Chart(ctx2, {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets2
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                // maintainAspectRatio: false, // 禁用保持纵横比
                height: ctx1.height / 2,    // 设置第二个图的高度为第一个图的三分之一
                scales: {
                    x: {
                        display: false, // 保留第二个图的 X 轴
                        ticks: {
                            autoSkip: true,         // 自动跳过密集的刻度
                            maxTicksLimit: 10,      // 设置最大显示的刻度数
                            stepSize: Math.ceil(labels.length / 10),  // 设置每步跳过的刻度数（可根据数据长度调整）
                            maxRotation: 0,         // 防止 X 轴标签旋转
                            minRotation: 0          // 防止 X 轴标签旋转
                        }
                    }
                }
            }
        });
    }

    function renderTrade(drawData) {
        // 如果已经有一个图表实例，先销毁它
        if (chartInstance3) {
            chartInstance3.destroy();
            chartInstance4.destroy();
        }
        // 获取 common labels (共用的 X 轴，假设所有数据集都使用同一横坐标)
        const labels = drawData[0]?.labels || [];
        // 创建第三个图表的数据集（用于显示 交易收益）
        const datasets3 = drawData.slice(0, 1).map(item => ({
            label: item.label,               // 数据集的标签
            data: item.data,                 // 对应的数据
            borderColor: item.borderColor || 'rgba(75, 192, 192, 1)', // 自定义边框颜色
            borderWidth: 2,
            fill: false,
            pointRadius: 1,  // 减小点的半径，避免显示太大的圆圈
            pointHoverRadius: 2, // 鼠标悬浮时点的半径
        }));

        // 创建第四个图表的数据集（用于显示 交易持仓）
        const datasets4 = drawData.slice(1).map(item => ({
            label: item.label,               // 数据集的标签
            data: item.data,                 // 对应的数据
            borderColor: item.borderColor || 'rgba(255, 99, 132, 1)', // 自定义边框颜色
            borderWidth: 2,
            fill: false,
            pointRadius: 1,  // 减小点的半径，避免显示太大的圆圈
            pointHoverRadius: 2, // 鼠标悬浮时点的半径
        }));

        // 渲染第三个图表（交易收益）
        chartInstance3 = new Chart(ctx3, {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets3
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    x: {
                        display: false  // 隐藏第一个图表的 X 轴
                    }
                }
            }
        });
        // 渲染第四个图表（交易持仓）
        chartInstance4 = new Chart(ctx4, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: datasets4
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                // maintainAspectRatio: false, // 禁用保持纵横比
                scales: {
                    x: {
                        display: false, // 保留第二个图的 X 轴
                        ticks: {
                            autoSkip: true,         // 自动跳过密集的刻度
                            maxTicksLimit: 10,      // 设置最大显示的刻度数
                            stepSize: Math.ceil(labels.length / 10),  // 设置每步跳过的刻度数（可根据数据长度调整）
                            maxRotation: 0,         // 防止 X 轴标签旋转
                            minRotation: 0          // 防止 X 轴标签旋转
                        }
                    }
                }
            }
        });
    }

    // 动态生成表格内容
    function renderMetricsTable(metrics) {
        metricsTable.innerHTML = ''; // 清空现有内容
        metrics.forEach(metric => {
            const row = `
                <tr>
                    <td>${metric[0]}</td>
                    <td>${metric[1]}</td>
                    <td>${metric[2]}</td>
                </tr>
            `;
            metricsTable.innerHTML += row;
        });
    }

    // 更新回测总结
    function renderSummary(summary) {
        summaryText.textContent = summary;
    }
    // progressBars容器
    let progressBars = {};
    // 请求数据函数
    function updatePage() {
        fetch('/operate/get_variable/', { method: 'GET' })
            .then(response => response.json())
            .then(data => {
                if ("model_data" in data) {
                    // 检查lab_var_part2_5中的数据，有什么渲染什么，若execute显示为True，则直接显示并中止循环监测
                    if (Object.keys(data.model_data.lab_var_part2_5.progress).length !== 0) {
                        // 循环渲染progress中的各项的值
                        renderProgressBars(data.model_data.lab_var_part2_5.progress);
                    }
                    if (data.model_data.lab_var_part2_5.datetime_ls.length !== 0) {
                        // datetime_ls有值，渲染图表相关的内容
                        // 组合出图表绘制需要的数据
                        let drawData = [
                            {
                                label: '净值',           // 数据集的标签（会显示在图例中）
                                data: data.model_data.lab_var_part2_5.value_ls,  // Y轴数据
                                labels: data.model_data.lab_var_part2_5.datetime_ls, // X轴标签（仅需在第一个对象中提供）
                                borderColor: 'rgba(255, 99, 132, 1)' // 折线颜色（可选）
                            },
                            {
                                label: '收盘价',           // 数据集的标签（会显示在图例中）
                                data: data.model_data.lab_var_part2_5.close_ls,  // Y轴数据
                                borderColor: 'rgba(75, 192, 192, 1)' // 折线颜色（可选）
                            },
                            {
                                label: '仓位',           // 数据集的标签（会显示在图例中）
                                data: data.model_data.lab_var_part2_5.pos_ls,  // Y轴数据
                                borderColor: 'rgba(255, 192, 58, 1)' // 折线颜色（可选）
                            }
                        ];
                        renderChart(drawData)
                    }
                    if (data.model_data.lab_var_part2_5.profit_ls.length !== 0) {
                        // profit_ls有值，渲染图表相关的内容
                        // 获取 profit_ls 的长度
                        let profitLength = data.model_data.lab_var_part2_5.profit_ls.length;

                        // 生成从 1 开始的自增序列，长度与 profit_ls 一致
                        let labels = Array.from({ length: profitLength }, (_, i) => i + 1);
                        // 组合出图表绘制需要的数据
                        let drawData = [
                            {
                                label: '收益',           // 数据集的标签（会显示在图例中）
                                data: data.model_data.lab_var_part2_5.profit_ls,  // Y轴数据
                                labels: labels, // X轴标签（仅需在第一个对象中提供）
                                borderColor: 'rgba(255, 99, 132, 1)' // 折线颜色（可选）
                            },
                            {
                                label: '持仓',           // 数据集的标签（会显示在图例中）
                                data: data.model_data.lab_var_part2_5.holding_ls,  // Y轴数据
                                borderColor: 'rgba(75, 192, 192, 1)' // 折线颜色（可选）
                            }
                        ];
                        renderTrade(drawData)
                    }
                    if (data.model_data.lab_var_part2_5.indicator_ls.length !== 0) {
                        // indicator_ls有值，渲染表格相关的内容
                        renderMetricsTable(data.model_data.lab_var_part2_5.indicator_ls)
                    }
                    if (data.model_data.lab_var_part2_5.describe_text) {
                        // describe_text有值，渲染总结文本相关的内容
                        renderSummary(data.model_data.lab_var_part2_5.describe_text);
                    }
                    if (data.model_data.lab_var_part2_5.describe_text) {
                        clearInterval(intervalId);

                        let strategy_direction = null;
                        if (data.model_data.strategy_direction==1) {
                            strategy_direction = "看多";
                        }else if (data.model_data.strategy_direction==-1) {
                            strategy_direction = "看空";
                        }

                        completedText.textContent = `本次实验已结束，策略方向为${strategy_direction}。`;
                        return;
                    }
                }else{
                    ;
                }
            })
            .catch(error => {
                clearInterval(intervalId);
                completedText.textContent = "返回出错，停止请求数据";
                console.error('Error fetching progress:', error)
                });
    }
    updatePage(); // 页面加载后立即更新
    // 页面加载后，每3秒发起一次请求
    intervalId = setInterval(updatePage, 1000);
//    // 模拟加载数据并渲染
//    renderProgressBars(backendData.progress);
//    renderChart(backendData.chart_data);
//    renderMetricsTable(backendData.metrics);
//    renderSummary(backendData.summary);
});













